<template>
	<div>
		<div class="gotop" @click="gotop">
			<img src="static/images/png/to_top.png" width="50" height="50" />
		</div>	
		<div class="page has-navbar has-tabbar" v-nav="{title: '车辆详情', showBackButton: true,showMenuButton: true, onMenuButtonClick: showCtrl,onBackButtonClick: onBackButtonClick}">
			<div class="page-content padding-top">
				<div v-show="tabIndex == 0">
					<swiper ref="swiper" direction="horizontal" width="100%" pager-color="#ea5a49" pager-bg-color="#e5e4e3" hide-pager="false" style="height:75vw" v-if="res.carImages">
						<swiper-item v-for="carImg in res.carImages">
							<div v-bind:style="{backgroundImage:'url('+imgUrl + carImg.imageUrl+'.r_1200xh_900)'}"><span class="img-tips">{{carImg.imageKey | filterImageName}}</span></div>
						</swiper-item>
					</swiper>
					<div class="basic-state" v-if="res.carOrderState==1"><aside><span :data-state="res.carOrderState">已预定</span></aside></div>
					<div class="basic">
						<div class="system-name ng-binding">{{res.carTitle || '暂无'}}</div>
						<div class="name ng-binding">宣传标题：{{res.carTitle || '暂无'}}</div>
						<div class="group" v-if="res.carRetailPrice && res.carRetailPrice > 0">
				          <div class="price-unit ng-binding" >¥</div>
				          <div class="price ng-binding">{{res.carRetailPrice}}万</div>
				        </div>
				        <div class="group" v-else="res.carRetailPrice && res.carRetailPrice > 0">
				          <div class="price ng-binding">面议</div>
				        </div>
						<div class="text"><span v-if="res.carLicenceState == 1">{{res.carLicenceDate | filterDateForYear}}</span><span v-if="res.carLicenceState == 2">未上牌</span><span v-if="res.carLicenceState == 3">新车</span>｜{{res.carMileage || '0'}}万公里｜{{res.carStockState | filterCarStockState}}
							<br>
							 {{res.carTransferState | filterCarTransferState}} | {{res.carFixedPriceState | filterCarFixedPriceState}}
						</div>
						<div class="text qiyuan-verified">车架号：{{res.carVin}}<img src="static/images/qiyuan_verified.svg" v-if="res.carAuthState == '1'"></div>
						
						<div class="text">库龄：{{res.stockAgeRemark || "-/天"}}
							<router-link :to="{path:'/customerQuery/'+$route.params.id,query:{params:res}}">
								<span class="tocustomer-list">销售商机</span>
							</router-link>
							<a href="tel:4001501999" class="detial-tell">
								<img src="static/images/tel.svg" width="20" height="20" />
								电话咨询
							</a>
						</div>
						<div class="car-finance-service">
							<aside>
								<span v-if="res.carFinanceService==1">金融服务</span>
								<span v-if="res.carExtendedWarranty==1" style="background: #ECBE60;">延保服务</span>
								<span v-if="res.carAuthState==10" style="background: none; padding: 0;">
									<img src="static/images/png/mark.png" width="75" height="20" alt="" />
								</span>
							</aside>
						</div>
					</div>
					<div style="padding:15px 0;" v-if="res.carRadarInfo">
						<div class="echarts">
							<p style="text-align: center; font-size: 12px; color: #999;">橘色面积越大越值得购买</p>
							<div ref="echartscarRadarList" style=" height: 240px"></div>
						</div>
					</div>
					<div v-if="res.carSaleState == 20||res.carAuthState==10">
						<div class="header">
							<div class="section">
								<div class="orange-bar"></div>
								<div class="title">扫码打印</div>
							</div>
						</div>
						<div class="table-records-panel">
							<div class="table-records">
								<div class="record" v-if="res.carId">
									<a :href="`${baseUrl}/mshop/src/cars_detial.html?marketId=${res.marketId}&shopId=${res.shopId}&imgUrl=${imgUrl}&carId=${res.carId}`">
										<div class="value ng-binding table-records-section">
											<div class="table-records-center">扫码后页面预览</div>
										</div>
									</a>
								</div>
								<div class="record" v-if="res.carSaleState==20">
									<a :href="'http://test.anpxd.com/cars/src/pricetag.html?carId='+$route.params.id">
										<div class="value ng-binding table-records-section">
											<div class="table-records-center">价签预览</div>
										</div>
									</a>
								</div>
								<div class="record" v-if="res.carAuthState==10">
									<a :href="'http://test.anpxd.com/cars/src/cert.html?carId='+$route.params.id">
										<div class="value ng-binding table-records-section">
											<div class="table-records-center">证书预览</div>
										</div>
									</a>
								</div>
								<div class="record" @click="codeShow=!codeShow">
									<div class="value ng-binding table-records-section">
										<div class="table-records-center">打印码</div>
									</div>
								</div>
							</div>
							<div class="table-records-code" v-show="codeShow">
								<article>
									<h5>请至价签自助打印机处打印</h5>
									<div class="p">
										<div ref="codeImg"></div>
										<img class="p-img" src="https://erp.anpxd.com/cars/images/logo.jpg"/>
									</div>
									<ul>
										<li><span>打印说明：车辆价签，每车每日限打两次</span></li>
									</ul>
								</article>
							</div>
						</div>
					</div>
					<div class="header">
						<div class="section">
							<div class="orange-bar"></div>
							<div class="title">车辆信息</div>
						</div>
					</div>
					<div class="table-records-panel">
				        <div class="table-records">
				          <div class="record">
				            <div class="value">
				              {{res.car4sUpkeepState | filterCar4sUpkeepState}}
				            </div>
				            <div class="title">4S店定期保养</div>
				          </div>
				          <div class="record">
				            <div class="value">
				              {{res.carOutColor || '-'}}
				            </div>
				            <div class="title">外观颜色</div>
				          </div>
				          <div class="record">
				            <div class="value">
				              {{res.carInColor || '-'}}
				            </div>
				            <div class="title">内饰颜色</div>
				          </div>
				        </div>
				        <div class="table-records">
				          <div class="record">
				            <div class="value">
				              {{res.carType.carTypeName || '-'}}
				            </div>
				            <div class="title">车身类型</div>
				          </div>
				          <div class="record">
				            <div class="value">
				              {{res.carDisplacement+res.carInletModel || '-'}}
				            </div>
				            <div class="title">排量</div>
				          </div>
				          <div class="record">
				            <div class="value">
				             {{res.carGearbox || '-'}}
				            </div>
				            <div class="title">变速箱</div>
				          </div>
				        </div>
				        <div class="table-records">
				          <div class="record">
				            <div class="value">
				              {{res.carFuel || '-'}}
				            </div>
				            <div class="title">燃油类型</div>
				          </div>
				          <div class="record">
				            <div class="value">
				              {{res.carEnviron || '-'}}
				            </div>
				            <div class="title">排放标准</div>
				          </div>
				          <div class="record">
				            <div class="value">
				              -
				            </div>
				            <div class="title">-</div>
				          </div>
				        </div>
				        <div class="table-records">
				          <div class="record">
				            <div class="value">
				              {{res.carForceInsuranceDate | filterDateForMonthTwo }}
				            </div>
				            <div class="title">交强险日期</div>
				          </div>
				          <div class="record">
				            <div class="value">
				              {{res.carBusinessInsuranceDate| filterDateForMonthTwo }}
				            </div>
				            <div class="title">商业险日期</div>
				          </div>
				          <div class="record">
				            <div class="value">
				              {{res.carValidateDate| filterDateForMonthTwo}}
				            </div>
				            <div class="title">年审日期</div>
				          </div>
				        </div>
				      </div>
					<div class="header">
						<div class="section">
							<div class="orange-bar"></div>
							<div class="title">车辆描述</div>
						</div>
					</div>
					<list>
						<item class="item-icon-right no-topline">检测报告<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i></item>
				        <item style="white-space:normal;line-height:20px;padding:14px 16px;">瑕疵描述:{{res.carFlawDesc || ''}}</item>
				        <item style="white-space:normal;line-height:20px;padding:14px 16px;">卖点描述:{{res.carSellingPointDesc || ''}}</item>
				        <item style="white-space:normal;line-height:20px;padding:14px 16px;">按揭说明:{{res.carMortgageDesc || ''}}</item>
				        <item style="white-space:normal;line-height:20px;padding:14px 16px;">补充说明:{{res.carRemark || ''}}</item>
					</list>
				</div>
				<div v-show="tabIndex == 1">
					<div class="grobal-title">{{res.carTitle}}</div>
					<div class="header">
						<div class="section">
							<div class="orange-bar"></div>
							<div class="title">基本参数</div>
						</div>
					</div>
					<list class="list-ios" style="margin-bottom:0;">
						<item>厂商<span class="item-note">{{res.model.modelManufacturer}}</span></item>
						<item>级别<span class="item-note">{{res.carType.carTypeName}}</span></item>
						<item>发动机<span class="item-note">{{res.model.modelEngineModel}}</span></item>
						<item>变速箱<span class="item-note">{{res.model.modelGearbox}}</span></item>
						<item>车身结构<span class="item-note">{{res.model.modelBodywork}}</span></item>
					</list>

					<div class="header">
						<div class="section">
							<div class="orange-bar"></div>
							<div class="title">车身</div>
						</div>
					</div>
					<list class="list-ios" style="margin-bottom:0;">
						<item>长度(mm)<span class="item-note">{{res.model.modelLength}}</span></item>
						<item>宽度(mm)<span class="item-note">{{res.model.modelWidth}}</span></item>
						<item>高度(mm)<span class="item-note">{{res.model.modelHeight}}</span></item>
						<item>轴距(mm)<span class="item-note">{{res.model.modelWheelbase}}</span></item>
						<item>车身结构<span class="item-note">{{res.model.modelBody}}</span></item>
					</list>

					<div class="header">
						<div class="section">
							<div class="orange-bar"></div>
							<div class="title">发动机</div>
						</div>
					</div>
					<list class="list-ios" style="margin-bottom:0;">
						<item>发动机型号<span class="item-note">{{res.model.modelEngineModel}}</span></item>
						<item>排量(mL)<span class="item-note">{{res.model.modelDisplacement}}</span></item>
						<item>进气形式<span class="item-note">{{res.model.modelInletModel}}</span></item>
						<item>气缸排列形式<span class="item-note">{{res.model.modelCylinderArray}}</span></item>
						<item>气缸数(个)<span class="item-note">{{res.model.modelCylinderNum}}</span></item>
						<item>燃料形式<span class="item-note">{{res.model.modelFuelRoz}}</span></item>
						<item>环保标准<span class="item-note">{{res.model.modelEnviron}}</span></item>
					</list>

					<div class="header">
						<div class="section">
							<div class="orange-bar"></div>
							<div class="title">变速箱</div>
						</div>
					</div>
					<list class="list-ios" style="margin-bottom:0;">
						<item>变速箱类型<span class="item-note">{{res.model.modelGearbox}}</span></item>
						<item>挡位个数<span class="item-note">{{res.model.modelGearNum}}</span></item>
					</list>
					<div v-for="carConf in carConfig">
						<div class="header">
							<div class="section">
								<div class="orange-bar"></div>
								<div class="title">{{carConf.confName}}</div>
							</div>
						</div>
						<list class="list-ios" style="margin-bottom:0;">
							<item v-for="childCarConfItem in carConf.childCarConf">{{childCarConfItem.confName}}<span class="item-note" v-if="childCarConfItem.selectedState">有</span><span class="item-note" v-else="childCarConfItem.selectedState">无</span></item>
						</list>
					</div>

				</div>

			</div>
			<div class="tab-bar weui-flex">
				<div class="hairline-top"></div>
				<div class="weui-flex-item tab-item" :class="{on:tabIndex == 0}" @click="tab(0)">基本信息</div>|
				<div class="weui-flex-item tab-item" :class="{on:tabIndex == 1}" @click="tab(1)">配置信息</div>
			</div>
			<transition name="fadeIn">
				<carinfo v-if="sidebarRight" :params="res" @cancel="showCtrl" />
			</transition>

		</div>
	</div>
</template>
<script>
	let echarts = require('echarts/lib/echarts')
	import carinfo from 'src/assembly/carInfo'
	import QRCode from 'qrcodejs2'
	export default {
		data() {
			return {
				baseUrl:baseUrl,
				codeShow: false,
				imgUrl: imgUrl,
				res: {
					shop: {},
					user:{},
					model: {},
					carType: {},
					carRadarInfo:{},
					user:{},
				},
				carConfig: [],
				tabIndex: 0,
				sidebarRight: null,
				echartscarRadarListData: {					
	   				legend: {
		        		bottom: 5,
		        		data: ['北京'],
		        		itemGap: 20,
		        		textStyle: {
		            		color: '#fff',
		       		    	fontSize: 14
		        		},
		       			selectedMode: 'single'
	    			},
					radar: {
						indicator: [
							{
								name:'排量(10)',
								max: 6
							},
							{
								name: '车龄(15)',
								max: 15
							},
							{
								name: '里程(20)',
								max: 20
							},
							{
								name: '价格(80)',
								max: 80
							},
							{
								name: '过户(10)',
								max: 10
							}
						],
						splitLine: {
							lineStyle: {
								color: ['rgba(255,104,22, 0.4)', 'rgba(255,104,22, 0.1)', ].reverse()
							}
						},
						
						splitNumber: 5,
						name: {
							textStyle: {
								color: '#F9713C'
							}
						},
						splitArea: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: 'rgba(255,104,22, 0.5)'
							}
						}
					},
					series: {
						name: '偏爱车辆价格',
						type: 'radar',
						data: [
							[]
						],
						itemStyle: {
							normal: {
								color: '#FF6816',

							}
						},
						areaStyle: {
							normal: {
								opacity: 0.1
							}
						}
					}
				},
				
			}
		},
		components: {
			carinfo
		},
		computed:{
			codeImg(){
				return this.$refs.codeImg
			},
			userSession() {
				return sess.get('userSession')
			},
			echartscarRadarList() {
				return echarts.init(this.$refs.echartscarRadarList)
			},
		},
		created() {
			var _this = this;
			this.getCollection()
			axios.get(baseUrl + '/controller/getCarById', {
					params: {
						carId: this.$route.params.id,
						imageViewId:2
					}
				})
				.then(function(res) {
					_this.res = res.data.result;
					console.log(_this.res.carSaleState)
					if (_this.res.carSaleState >= 20) {
						setTimeout(()=>{
							_this.codeImgFn()
						},100)
						
					}
					if (_this.res.carRadarInfo) {
						_this.echart()
					}
					
				});
			axios.get(baseUrl + '/controller/getCarConfById', {
					params: {
						carId: this.$route.params.id
					}
				})
				.then(function(res) {
					_this.carConfig = res.data.result;
				});
		},
		methods: {
			onBackButtonClick () {
				this.$store.commit('carObjStateChange', true)
				this.$router.go(-1)
			},
			tab(index) {
				this.tabIndex = index;

				// console.log(index);
			},
			echart(){
				this.echartscarRadarListData.series.data[0][0] = parseFloat(this.res.carRadarInfo.carDisplacement)>6?6:parseFloat(this.res.carRadarInfo.carDisplacement)||0
				this.echartscarRadarListData.series.data[0][2] = 20-(this.res.carRadarInfo.carMileage>20?20:this.res.carRadarInfo.carMileage)||0
				this.echartscarRadarListData.series.data[0][3] = this.res.carRadarInfo.carRetailPrice>80?0:80-(parseFloat(this.res.carRadarInfo.carRetailPrice)||0)
				this.echartscarRadarListData.series.data[0][4] = 10-(parseFloat(this.res.carRadarInfo.carTransferNum)>10?10:parseFloat(this.res.carRadarInfo.carTransferNum))||0
				this.echartscarRadarListData.radar.indicator[0].name = `排量(${this.res.carDisplacement||'0'}${this.res.carInletModel||''})`
        switch (~~this.res.carLicenceState) {
          case 1:
            this.echartscarRadarListData.radar.indicator[1].name = `车龄(${this.res.carRadarInfo.carAge||'0'}/年)`
            this.echartscarRadarListData.series.data[0][1] = 15-(this.res.carRadarInfo.carAge>15?15:this.res.carRadarInfo.carAge)||0
            break
          case 2:
            this.echartscarRadarListData.radar.indicator[1].name = '车龄(新车)'
            this.echartscarRadarListData.series.data[0][1] = 15
            break
          case 3:
            this.echartscarRadarListData.radar.indicator[1].name = '车龄(未上牌)'
            this.echartscarRadarListData.series.data[0][1] = 15
            break
        }
				this.echartscarRadarListData.radar.indicator[2].name = `里程(${this.res.carRadarInfo.carMileage||'0'}/万公里)`
				this.echartscarRadarListData.radar.indicator[3].name = `价格(${this.res.carRadarInfo.carRetailPrice||'0'}/万)`
				this.echartscarRadarListData.radar.indicator[4].name = `过户(${parseFloat(this.res.carRadarInfo.carTransferNum)||'0'}/次)`
				this.$nextTick().then(()=>{
					this.echartscarRadarList.setOption(this.echartscarRadarListData)
				})
			},
			showCtrl() {
				this.sidebarRight = !this.sidebarRight
			},
			codeImgFn(){
				new QRCode(this.codeImg, {width : 200, height : 200}).makeCode(this.$route.params.id)
			},
			getCollection(){				
				axios.get(baseUrl + '/controller/carFavorite/getCarFavorite', {
					params:{
						carId:this.$route.params.id,
						userId:this.userSession.userId
					}
				}).then(res=>{
					this.favoriteState = res.data.result
				})
			},
			collection(boo){
				if(boo){
					axios.get(baseUrl + '/controller/carFavorite/insertCarFavorite', {
						params:{
							carId:this.$route.params.id,
							userId:this.userSession.userId
						}
					}).then(res=>{
						if(res){
							setTimeout(()=>{
								this.favoriteState = res.data.result
								$toast.show('已添加至收藏车辆', 2000)
							},400)							
						}
					})
				}else{
					axios.get(baseUrl + '/controller/carFavorite/deleteCarFavorite', {
						params:{
							userId:this.userSession.userId,
							carFavoriteId:this.favoriteState.carFavoriteId
						}
					}).then(res=>{
						if(res){
							setTimeout(()=>{
								this.favoriteState = ''
								$toast.show('已取消收藏', 2000)
							},400)							
						}
					})
				}
			},
			gotop(){
				let dom = document.querySelectorAll('.page-content')				
				dom[0].scrollTop = 0
			},
			
			

		}
	}
</script>
<style scoped>
	
	.basic {
		padding: 10px 16px 8px;
		background: #fff;
	}
	
	.basic .system-name {
		font-size: 16px;
		font-weight: 700;
	}
	
	.basic .name {
		margin-top: 2px;
		font-size: 12px;
	}
	
	.basic .group {
		margin-top: 10px;
		margin-bottom: 2px;
	}
	
	.basic .group div {
		float: left;
		height: 30px;
		line-height: 30px;
	}
	
	.basic .group .price-unit {
		font-size: 14px;
		font-weight: 700;
		color: #e55600;
	}
	
	.basic .group .price {
		font-size: 20px;
		font-weight: 700;
		color: #e55600;
	}
	
	.basic .group .view-count {
		color: #fff;
		padding: 0 5px;
		font-size: 10px;
		font-weight: 700;
		height: 22px;
		line-height: 22px;
		background: #f09190;
		float: right;
		margin-top: 12px;
	}
	
	.basic .text {
		clear: both;
		margin-top: 8px;
		font-size: 12px;
	}
	
	.basic .qiyuan-verified img {
		width: 58px;
		height: 16px;
		float: right;
		margin-top: -1px;
	}
	
	.basic .qiyuan-verified img {
		width: 58px;
		height: 16px;
		float: right;
		margin-top: -1px;
	}
	
	.statistics-panel {
		display: flex;
		height: 60px;
		background: #fff;
		margin-top: 5px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
	
	.statistics-panel .record {
		flex: 1;
		text-align: center;
		font-size: 14px;
	}
	
	.statistics-panel .record:not(:last-child) {
		border-right: 1px solid #e6e6e6;
	}
	
	.statistics-panel .record .value {
		color: #ff6816;
		position: relative;
		top: -4px;
	}
	
	.statistics-panel .record .title {
		padding-top: 1px;
	}
	
	.header .section {
		height: 28px;
		font-size: 14px;
		color: #333;
		font-weight: 600;
		background: #f8f8f8;
		display: flex;
	}
	
	.section .orange-bar {
		width: 4px;
		height: 28px;
		background: #ff6816;
	}
	
	.section .title {
		flex: auto;
		padding: 5px 12px;
	}
	
	.table-records-panel {
		clear: both;
		background: #fff;
	}
	
	.table-records-panel .table-records {
		display: flex;
	}
	
	.table-records-panel .table-records .record {
		flex: 1;
		text-align: center;
		height: 80px;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	.table-records-panel .table-records .record:not(:last-child) {
		border-right: 1px solid #e6e6e6;
	}
	
	.table-records-panel .table-records .record .value {
		font-size: 14px;
	}
	
	.table-records-panel .table-records .record .title {
		font-size: 14px;
		margin-top: 5px;
		color: #737373;
	}
	
	.table-records-panel .table-records:not(:last-child) .record {
		border-bottom: 1px solid #e6e6e6;
	}
	
	.tab-bar {
		height: 45px;
		padding: 0 0 0 0px;
		background: #fff;
		color: #999;
		position: fixed;
		bottom: 0;
		left: 0;
		line-height: 45px;
		width: 100%;
	}
	
	.tab-item {
		color: #666;
		max-width: 100%;
	}
	
	.tab-item.on {
		color: #fd6b2c;
	}
	
	.grobal-title {
		height: 20px;
		line-height: 20px;
		font-size: 12px;
		padding: 0 16px;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.4);
	}
</style>